<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="中部跟机"></el-tab-pane>
      <el-tab-pane label="全工作面跟机"></el-tab-pane>
    </el-tabs>
    <div class="wrapper">
      <el-card class="box_card" style="">
        <div slot="header" class="clearfix">
          <span>跟机工艺</span>
          <el-button size="mini" style="float: right; padding: 3px 0" type="text" @click="handleGoCfgSTrackRunner">
            跟机动作配置</el-button>
        </div>
        <div v-for="(item, k) in tableData" :key="k" class="card_item">
          <div>{{ item.NextStageID }}</div>
          <div>
            <el-button type="primary" size="mini" circle icon="el-icon-top" @click="handleClickUp(item, k)"
              v-if="k != 0"></el-button>
            <el-button type="primary" size="mini" circle icon="el-icon-bottom" @click="handleClickDown(item, k)"
              v-if="k != tableData.length - 1"></el-button>
          </div>
        </div>
      </el-card>
      <div class="table_wrap">
        <el-table :data="tableData" border :row-key="getRowKey" align="left" size="mini" height="450">
          <el-table-column label="阶段ID">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.StageID" placeholder="请选择">
                <el-option v-for="item in enSTrackStage" :key="item.key" :label="item.name" :value="item.key">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="Next阶段ID">
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.NextStageID" placeholder="请输入内容"></el-input> -->
              <el-select size="mini" v-model="scope.row.NextStageID" placeholder="请选择">
                <template v-for="item in enSTrackStage">
                  <el-option v-if="item.key != scope.row.StageID" :key="item.key" :label="item.name" :value="item.key">
                  </el-option>
                </template>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="阶段名称">
            <template slot-scope="scope">
              <el-input size="mini" @change="handleChangePhasesName" v-model="scope.row.name" placeholder="请输入内容">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="煤机触发方向">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.TriggerDir" placeholder="请选择">
                <el-option v-for="item in enSTrackRunDir" :key="item.key" :label="item.name" :value="item.key">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="参数组">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.ParaIDs" multiple placeholder="请选择">
                <el-option v-for="item in enParaID" :key="item.key" :label="item.name" :value="item.key"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="支持架型">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.shieldTypeOpt" multiple placeholder="请选择">
                <el-option v-for="item in enShieldType" :key="item.key" :label="item.name" :value="item.key">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;">

          <div id="stageMount" style="flex: 1;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import G6 from '@antv/g6';
  import initX6 from "./utils/initX6.js"
  // import vuedraggable from 'vuedraggable'
  import Sortable from 'sortablejs';

  import enParaID from './data/enParaID';
  import enSTrackRunDir from './data/enSTrackRunDir';
  import enShieldType from './data/enShieldType';
  import enSTrackControl from './data/enSTrackControl';
  import enSTrackStage from './data/enSTrackStage';

  export default {
    name: 'settingActionsOperation',
    components: {
      // vuedraggable
    },
    data() {
      return {
        enShieldType: enShieldType,
        enSTrackControl: enSTrackControl,
        enSTrackStage: enSTrackStage,
        enSTrackRunDir: enSTrackRunDir,
        enParaID: enParaID,
        showDelete: false,
        showEditor: false,
        dialogVisible: false,
        dialogTitle: false,
        form: {},
        toolsChangeKey: null,
        routeQuery: {},
        tableData: [],
        graph: null,
        stageList: {
          edges: [],
          nodes: []
        }
      };
    },
    updated() {},
    created() {
      if (this.$route.query) {
        this.routeQuery = this.$route.query;
        if (this.routeQuery.hasOwnProperty('StageIDs')) {
          this.tableData = this.routeQuery.StageIDs.map((item, i, arr) => {
            let obj = {
              id: i + '',
              StageID: item * 1,
              NextStageID: i == arr.length - 1 ? arr[0] * 1 : arr[i + 1] * 1,
              name: '33',
              shieldTypeOpt: [],
              TriggerDir: null,
              ParaIDs: []
            };
            return obj;
          });
        }
      }
    },
    mounted() {
      document.body.ondrop = function(event) {
        event.preventDefault();
        event.stopPropagation();
      };
      this.rowDrop();
      this.initShow();
    },
    methods: {
      handleClickPrint() {
        console.log(JSON.stringify(this.tableData));
      },
      handleChangePhasesName() {
        this.updataGraph()
      },
      handleGoCfgSTrackRunner() {
        this.$router.push({
          path: '/CfgSTrackRunner5',
          query: this.tableData
        });
      },
      initShow() {
        this.graph = initX6.initMount({
          node: "stageMount",
          height: 250,
          scroller: true
        })
        this.updataGraph()
      },
      updataGraph() {
        let list = this.restructuringList()
        this.graph.fromJSON(list)
      },
      restructuringList() {
        let data = {
          nodes: [],
          edges: []
        }
        data.nodes = this.tableData.map((item, i) => {
          let obj = {};
          obj = {
            x: 50 + i * 150,
            y: 50,
            width: 80,
            height: 40,
            attrs: {
              body: {
                // fill: '#2ECC71', // 背景颜色
                stroke: '#000', // 边框颜色
              },
              label: {
                text: item.name, // 文本
                fill: '#333', // 文字颜色
                fontSize: 13, // 文字大小
              },
            },
            ...item,
          };
          return obj;
        });
        data.edges = this.tableData.map((item, i) => {
          if (i == this.tableData.length - 1) {
            let obj = {
              source: item.id, // 起始点 id
              target: this.tableData[0].id, // 目标点 id
              vertices: [{
                x: 50 + i * 150 + 40,
                y: 200
              }, {
                x: 50 + 40,
                y: 200
              }, ],
            };
            return obj;
          }
          let obj = {
            source: item.id, // 起始点 id
            target: this.tableData[i + 1].id, // 目标点 id
          };
          return obj;
        });
        return data
      },
      handleClickEditor(r, k) {
        this.toolsChangeKey = k;
        this.form = {
          ...r
        };
        this.dialogTitle = false;
        this.dialogVisible = true;
      },
      onSubmit() {
        if (this.dialogTitle == false && this.toolsChangeKey) {
          this.toolsList[this.toolsChangeKey] = this.form;
          this.dialogVisible = false;
          return;
        }
        this.toolsList.push(this.form);
        this.dialogVisible = false;
      },
      handleClickDelete(r, k) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.toolsList.splice(k, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      handlePushTable(r) {
        this.tableData.push(r);
        this.updataGraph()
      },
      handleClick(r) {
        console.log(r);
      },
      handleClickAdd() {
        this.dialogTitle = true;
        this.form = {};
        this.dialogVisible = true;
      },
      handleClickUp(r, k) {
        if (k == 0) {
          return;
        }
        this.tableData[k] = this.tableData.splice(k - 1, 1, this.tableData[k])[0];
        this.updataGraph()
      },
      handleClickDown(r, k) {
        if (k == this.tableData.length - 1) {
          return;
        }
        this.tableData[k] = this.tableData.splice(k + 1, 1, this.tableData[k])[0];
        this.updataGraph()
        console.log(r);
      },
      getRowKey(row) {
        return row.id;
      },
      //行拖拽
      rowDrop() {
        const tbody = document.querySelector('.el-table__body-wrapper tbody');
        const _this = this;
        Sortable.create(tbody, {
          onEnd({
            newIndex,
            oldIndex
          }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0];
            _this.tableData.splice(newIndex, 0, currRow);
            _this.updataGraph()
          }
        });
        // this.restructuringList()
        // this.graph.destroy()
        // this.initShow()
      }
    }
  };
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .flex_center {
    align-items: center;
  }

  .ju_sb {
    justify-content: space-between;
  }

  .wrapper {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    width: 100%;
  }

  .table_wrap {
    width: calc(100% - 250px);
  }

  .card_item {
    display: flex;
    width: 220px;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid #f6f6f6;
  }

  .card_item+.card_item {
    margin-top: 8px;
  }
</style>
